<template>
  <div>
    <xn-table
      type="selection"
      :columns="listHeader"
      :data="list"
      :page="pageConfig"
      @on-page="fnGetList"
      @handle-buttons="handleButtons"
    ></xn-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      activeName: "1",
      type: 2,
      listHeader2: [
        {
          prop: "id",
          label: "ID",
          show: (row) => {
            console.log(row);
            return false;
          },
        },
      ],
      listHeader: [
        { prop: "id", label: "ID",showOverflowTooltip: false },
        { prop: "id", label: "ID1",'show-overflow-tooltip':false },
        { prop: "id", label: "ID" },
        { prop: "id", label: "ID" },
        { prop: "id", label: "ID" },
        { prop: "id", label: "ID" },
        { prop: "id", label: "ID" },
        { prop: "id", label: "ID" },
        { prop: "id", label: "ID" },
        {
          label: "姓名",
          sortable: true,
          render: (h, { row }) => h("span", row.name),
        },
        { prop: "age", label: "年龄", labelMsg: "表头字段说明" },
        { prop: "age", label: "年龄", labelMsg: "表头字段说明" },
        { prop: "age", label: "年龄", labelMsg: "表头字段说明" },
        { prop: "age", label: "年龄", labelMsg: "表头字段说明" },
        { prop: "age", label: "年龄", labelMsg: "表头字段说明" },
        { prop: "date", label: "日期", sortable: true },
        {
          label: "操作",
          fixed: "right",
          more: {
            options: [
              { label: "你好" },
              { label: "你好" },
            ],
          },
        },
      ],
      disabledList: [122],
      list: [
        { id: 122, uid: 1, date: "2011-01-01", name: "阿松大", age: 18 },
        // { id: 122, uid: 1, date: "2011-01-01", name: "阿松大", age: 18 },
        // { id: 122, uid: 1, date: "2011-01-01", name: "阿松大", age: 18 },
        // { id: 122, uid: 1, date: "2011-01-01", name: "阿松大", age: 18 },
        // { id: 122, uid: 1, date: "2011-01-01", name: "阿松大", age: 18 },
        // { id: 122, uid: 1, date: "2011-01-01", name: "阿松大", age: 18 },
        // { id: 122, uid: 1, date: "2011-01-01", name: "阿松大", age: 18 },
        // {
        //   id: 222222222222222,
        //   uid: 1,
        //   date: "2011-01-01",
        //   name: "地方",
        //   age: 18,
        // },
        // { id: 2, date: "2011-01-03", name: "lzw", age: 22 },
      ],
      pageConfig: {
        total: 8,
        pageSize: 1,
        pageNum: 1,
      },
      tools: [{ label: "导出", prop: "export", icon: "el-icon-files" }],
      // pageConfig: {},
    };
  },
  computed: {},
  created() {},
  watch: {},
  methods: {
    handleSort(e) {
      console.log(e);
    },
    handleRefresh() {
      console.log("re");
    },
    handleButtons(args) {
      console.log(args);
      this.$refs.table.clearSelection();
    },
    fnGetList(v) {
      console.log(v);
      this.list = [
        { id: 122, uid: 1, date: "2011-01-01", name: "阿11111松大", age: 18 },
      ]
    },
    onradio(row, a) {
      console.log("val: ", {...row}, {...a});
    },
    onSelection(val) {
      console.log(val);
    },
    handleSelectable(a, b ) {
      console.log("a,b,c: ", a, b );
      return false
    },
  },
};
</script>

<style>
</style>